  <template>
    <ion-page>
      <ion-header>
        <ion-toolbar>
        <div class="title">
              <div><ion-col></ion-col></div>
              <span>&nbsp;&nbsp;&nbsp;</span>
              <ion-icon  style="font-size: 20px" aria-hidden="true" :icon="closeSharp"  @click="goToDetail"/>
              <span>&nbsp;&nbsp;&nbsp;</span>validate
              <div><ion-col></ion-col></div>
            </div>
        </ion-toolbar>
      </ion-header>
      <ion-content>
        <form @submit.prevent="submitForm">
          <ion-grid>
            <ion-row >
              <ion-col size="5" class="text"><ion-label  for="inputValue1-input" position="stacked" :class="{ 'required-label': selectedOption === 'real' }">EVENT NAME:</ion-label></ion-col>
              <ion-col size="7"><ion-input class="input1" input-id="inputValue1-input" v-model="inputValue1" :required="selectedOption==='real'" > </ion-input></ion-col>
              <ion-col size="5" class="text"><ion-label for="inputValue2-input" position="stacked">SVOM BURST ID:</ion-label></ion-col>
              <ion-col size="7"><ion-input class="input1" inputValue1="inputValue2-input" v-model="inputValue2" ></ion-input></ion-col>
            </ion-row>
            <ion-radio-group  v-model="selectedOption">
              <ion-item lines="none">
                <ion-label>Real</ion-label> 
                <ion-radio value="real" slot="start" checked></ion-radio><br />
              </ion-item>
              <ion-item lines="none">
                <ion-label>False</ion-label>
                <ion-radio value="False" slot="start"></ion-radio><br />
              </ion-item>
            </ion-radio-group>
            <br />
            <div>
              <ion-col >NOTE:</ion-col>
              <br />
              <br />
              <ion-textarea type="text" class="input-large" v-model="note"/>
            </div>  
            <br />
            <br />        
            <ion-button @click="submit" type="submit" fill="outline" expand="block">SUBMIT</ion-button>
          </ion-grid>
        </form>
      </ion-content>
    </ion-page>
  </template>
   
  <script setup>
  import { closeSharp } from 'ionicons/icons';
  import { ref } from 'vue';
  import { useRouter } from 'vue-router';
  import { IonContent,
    IonRadio,
    IonGrid,
    IonRow,
    IonCol,
    IonIcon,
    IonTextarea,
    IonRadioGroup,
    IonButton,
    IonInput,
    IonLabel,  
    IonPage,
    IonItem,
    IonHeader,
    IonToolbar
    } from '@ionic/vue';
import service from '@/api/api';
  const selectedOption = ref('real');
  const inputValue1 = ref('');
  const inputValue2 = ref('');
  const note=ref('')


  const router = useRouter();
  const submit= async() => {
    if (selectedOption.value !== null){
      if (selectedOption.value === 'real' && !inputValue1.value ) {
        alert('event name is not Empty!');
        return;
      }
      try {
      const formData = new URLSearchParams();
      formData.append('triggerName', props.triggerName);
      formData.append('triggerId', props.triggerId);
      formData.append('eventName', inputValue1.value);
      formData.append('svomBurstId', inputValue2.value);
      formData.append('note', note.value);
      formData.append('isTrue', selectedOption.value);
    const response = await service.post('/alertApi/validate',formData, {
        headers: {
          'Content-Type': 'application/x-www-form-urlencoded'
        }
    });
    console.log(response.data);
    alert('success');
    router.go(-1); // 提交成功后返回上一页
  } catch (error) {
    console.error(error);
    alert('Submission failed.');
  }
  console.log('提交的选项:', selectedOption.value);
  }else {
    alert('please judge');
  }  
};
import { watchEffect } from 'vue';
const props = defineProps({
  triggerName: {
    type: String,
    required: true
  },
  eventName: {
    type: String,
    default: ''
  },
  svomBurstId: {
    type: String,
    default: ''
  },
  triggerId: {
    type: String,
    default: ''
  },
});

// 自动填充逻辑
watchEffect(() => {
  if (props.eventName) inputValue1.value = props.eventName;
  if (props.svomBurstId) inputValue2.value = props.svomBurstId;
});

const goToDetail = () => {
      router.go(-1);
  };
  

  </script>

  <style scoped>
  .title{
  background-color: rgb(97, 95, 95);
  color:white;
  font-weight: bold;
}
    ion-radio {
    --color: #ddd;
    --color-checked: #111011;
  }

  ion-radio.ios::part(container) {
    width: 20px;
    height: 20px;

    border: 2px solid #ddd;
    border-radius: 4px;
    
  }

  .radio-checked.ios::part(container) {
    border-color: #111011;
  }
.required-label::after {
  content: '*';
  color: red;
}
.input-large{
  width: 90%;
  height: 80px;
  border: 1px solid black;
  margin: 0 auto;
  border-radius: 4px;
  padding: 0 10px; 
}
.input1{
  width: 80%;
  height: 5px;
  border: 1px solid black;
  border-radius: 4px;
  padding: 0 10px; 
}
.text{
 font-size: 18px;
}
</style>